<script setup>
import { ref, onMounted } from 'vue'
import { likeOrFavoriteInfo, listArticleAll } from '@/api/article'
import { showToast } from 'vant'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const articles = ref([])
const loading = ref(false)
const finished = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const type = ref(Number(route.query.type) || 0)

const loadArticles = async () => {
  try {
    loading.value = true
    let res
    if (type.value === 2) {
      res = await listArticleAll(pageNum.value, pageSize.value)
    } else {
      res = await likeOrFavoriteInfo(pageNum.value, pageSize.value, type.value)
    }
    if (res.data.list.length === 0) {
      finished.value = true
    } else {
      articles.value.push(...res.data.list)
      pageNum.value++
    }
  } catch (error) {
    showToast('加载失败')
  } finally {
    loading.value = false
  }
}

const goToDetail = (id) => {
  router.push(`/article/${id}`)
}

onMounted(() => {
  loadArticles()
})
</script>

<template>
  <div class="article-list-page">
    <van-nav-bar
      :title="type === 0 ? '我的点赞' : type === 1 ? '我的收藏' : '我的文章'"
      left-arrow
      @click-left="$router.back()"
    />
    
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
    >
      <div class="article-item" v-for="article in articles" :key="article.id" @click="goToDetail(article.id)">
        <div class="article-img">
          <img :src="article.imagesList[0]" alt="">
        </div>
        <div class="article-content">
          <div class="title">{{ article.title }}</div>
          <div class="content" v-html="article.content"></div>
          <div class="stats">
            <div class="stat-item">
              <van-icon name="chat-o" />
              <span>{{ article.review }}</span>
            </div>
            <div class="stat-item">
              <van-icon name="like" :style="{ color: article.likeStatus === 1 ? '#FF653F' : '#666' }" />
              <span>{{ article.liked }}</span>
            </div>
            <div class="stat-item">
              <van-icon name="star" :style="{ color: article.favoriteStatus === 1 ? '#FF653F' : '#666' }" />
              <span>{{ article.favorite }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<style scoped lang="scss">
.article-list-page {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 20px;

  .article-item {
    display: flex;
    background: #fff;
    padding: 15px;
    margin-bottom: 10px;

    .article-img {
      width: 120px;
      height: 90px;
      margin-right: 12px;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
      }
    }

    .article-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 8px;
      }

      .content {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .stats {
        display: flex;
        align-items: center;

        .stat-item {
          display: flex;
          align-items: center;
          margin-right: 15px;
          color: #666;
          font-size: 12px;

          .van-icon {
            font-size: 16px;
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style> 